<template>
    <div class="app-container editcss">
        <el-row :gutter="0" class="el-card is-always-shadow el-card__body  card_contents" style="padding: 0px;">
            <el-col class="titleHeight">
                <el-row class="content_h">
                    <el-col class="title_tops">
                        <div class="title_tops_t">
                            <div class="title_top_E">Device Management</div>
                            <div class="title_top_C">设备管理</div>
                        </div>
                    </el-col>
                    <el-col class="screen_case">
                        <el-row>
                            <el-col :span="4">
                                <div class="screen_case_amount mb20">
                                    <span class="screen_case_amount_lable">设备数量：</span>
                                    <span class="screen_case_amount_value">{{ total }}</span>
                                </div>
                                <!-- <construction title="设备导入" @addition="additions" style="margin: 0;"
                                    class="screen_case_amount" /> -->

                                <el-upload id="upfile_loading" ref="upload" action="" style="display:inline-block;"
                                    :multiple="false" :show-file-list="false" :http-request="importBtn"
                                    accept=".xls, .xlsx">
                                    <el-button type="" style="margin-left:0;border: none;" class="btnfile">
                                        <img src="@/assets/iconfont/square.png" alt="" srcset="" class="mr10">
                                        设备导入
                                    </el-button>
                                </el-upload>
                            </el-col>
                            <el-col :span="5">
                                <screenSelect title="设备编号" type='input' v-model="queryFrom.deviceNo"
                                    :isValue='queryFrom.deviceNo' placeholder="请输入"
                                    @transfer="valueHeld($event, 'deviceNo')" class="mb15" />
                                <screenSelect title="所属机构" type='select' v-model="queryFrom.hospitalId"
                                    :isValue='queryFrom.hospitalId' placeholder="请选择"
                                    @transfer="valueHeld($event, 'hospitalId')" :options="hospitaloptions" class=" " />
                            </el-col>
                            <el-col :span="5">
                                <screenSelect title="所属科室" type='select' v-model="queryFrom.hospitalDepartId"
                                    :isValue='queryFrom.hospitalDepartId' placeholder="请选择"
                                    @transfer="valueHeld($event, 'hospitalDepartId')" :options="hospartoptions"
                                    class=" mb15" />
                                <screenSelect title="设备状态" type='select' v-model="queryFrom.status"
                                    :isValue='queryFrom.status' placeholder="请选择" @transfer="valueHeld($event, 'status')"
                                    :options="presentStageoptions" class="" />
                            </el-col>
                            <el-col :span="10">
                                <screenSelect title="导入时间段筛选" type='daterange' v-model="queryFrom.transferDateTime"
                                    :isValue='queryFrom.transferDateTime' @transfer="valueHeld($event, 'transferDateTime')"
                                    class="mb15" />
                                <el-button type="primary" class="ch_button " @click="search">
                                    <img class="ch_button_img" src="../../assets/iconfont/zoom-out.png" alt="" srcset="">
                                    <div>搜索</div>
                                </el-button>
                                <el-button type="primary" class="ch_button " @click="reset">
                                    <img class="ch_button_img" src="../../assets/iconfont/rotate-ccw.png" alt="" srcset="">
                                    <div>选项重置</div>
                                </el-button>
                                <el-button type="primary" class="ch_button" :disabled="isDerive" @click="derive">
                                    <img class="ch_button_img" src="../../assets/iconfont/share.png" alt="" srcset="">
                                    <div>数据导出</div>
                                </el-button>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-col>
            <el-col class="dialog_title_ch_conter_operate  card_contents_tex">
                <el-table border :data="tableData"   :key="randomTableKey" :height="endHeight" fit style="width: 100%;" header-row-class-name="hrcn" row-class-name="rcn">
                    <el-table-column align="center" label="序号" type="index" width="116">
                    </el-table-column>
                    <el-table-column align="center" label="设备编号" min-width="124">
                        <template slot-scope="scope">
                            {{ scope.row.deviceNo }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="MAC地址" min-width="137">
                        <template slot-scope="scope">
                            {{ scope.row.macAddress }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="所属机构" min-width="250">
                        <template slot-scope="scope">
                            {{ scope.row.hospitalName ? scope.row.hospitalName : '未绑定' }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="所属科室" min-width="97">
                        <template slot-scope="scope">
                            {{ scope.row.deptName ? scope.row.deptName : '未绑定' }}
                        </template>
                    </el-table-column>
                    <!-- <el-table-column align="center" label="设备绑定地址" min-width="250">
                        <template slot-scope="scope">
                            {{ scope.row.location ? scope.row.location : '未绑定' }}
                        </template>
                    </el-table-column> -->
                    <el-table-column align="center" label="导入时间" min-width="129">
                        <template slot-scope="scope">
                            {{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="绑定时间" min-width="129">
                        <template slot-scope="scope">
                            {{ parseTime(scope.row.bindTime, '{y}-{m}-{d}') }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="开启总次数" min-width="113">
                        <template slot-scope="scope">
                            {{ scope.row.totalRentNum  }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="状态" min-width="100">
                        <template slot-scope="scope">
                            <div :style="scope.row.status == 3 ? 'color:#FE294D;' : 'color:#000;'">
                                {{ presentStageoptions[scope.row.status].label }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" align="center" label="操作" width="300">
                        <template slot-scope="scope">
                            <el-button class="jiebangbtn"
                                :class="(scope.row.status == 3 || scope.row.status == 1) ? '' : 'jiebangbtnav'" type="text"
                                size="small" @click="unbindClick(scope.row)">
                                <img src="@/assets/iconfont/jiebangav.png" alt=""
                                    v-if="scope.row.status == 3 || scope.row.status == 1">
                                <img src="@/assets/iconfont/jiebang.png" alt="" srcset="" v-else>
                                解绑医院</el-button>
                            <el-button class="editbtn" type="text" size="small" @click="recordClick(scope.row)">
                                <img src="@/assets/iconfont/icon-jilu.png" alt="">
                                服务记录</el-button>
                            <el-button class="delbtn" :class="scope.row.status != 0 ? 'jiebangbtnav' : ''" type="text"
                                size="small" @click="delClick(scope.row)">
                                <img src="@/assets/iconfont/icondelav.png" alt="" v-if="scope.row.status != 0">
                                <img src="@/assets/iconfont/icondel.png" alt="" v-else>
                                删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="paginationblock" v-if="total > 0">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="pageData.pageNo" :page-sizes="[10, 20, 30, 40]" :page-size="pageData.pageSize"
                        :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>

        <!-- 新增 编辑 -->
        <el-dialog :visible.sync="rentDialogVisible" custom-class="addeteDialog" :modal='true'>
            <div slot="title">
                <div class="title_top_E">Rental Record</div>
                <div class="title_top_C">服务记录</div>
            </div>
            <div class="addeteDialog_conter">
                <div class="top_content" v-if="viewFrom">
                    <div class="top_content_item">
                        <!-- <img src="../../assets/images/shebei.png" alt=""> -->
                        <el-row :gutter="20" style="flex: 1;">
                            <el-col class="mb15" :span="8">
                                <span class="top_content_item_lable">设备编号：</span>
                                <span class="top_content_item_value">{{viewFrom.deviceNo}}</span>
                            </el-col>
                            <el-col class="mb15" :span="8">
                                <span class="top_content_item_lable">MAC地址：</span>
                                <span class="top_content_item_value">{{viewFrom.macAddress}}</span>
                            </el-col>
                            <el-col class="mb15" :span="8">
                                <span class="top_content_item_lable">所属机构：</span>
                                <span class="top_content_item_value">{{viewFrom.hospitalName}}</span>
                            </el-col>
                            <el-col class="mb15" :span="8">
                                <span class="top_content_item_lable">所属科室：</span>
                                <span class="top_content_item_value">{{viewFrom.deptName}}</span>
                            </el-col>
                            <el-col class="mb15" :span="8">
                                <span class="top_content_item_lable">入库时间：</span>
                                <span class="top_content_item_value">{{parseTime(viewFrom.createTime, '{y}-{m}-{d}')}}</span>
                            </el-col>
                        </el-row>
                        <div class="top_content_item_foot">
                            <div class="top_content_item_footT"><span>{{viewFrom.totalRentNum}}</span><span>次</span></div>
                            <div class="top_content_item_footB"><span>服务总次数</span></div>
                        </div>
                    </div>
                    <el-table border :data="viewFrom.rentHistoryList" fit style="width: 100%;" :height="400" header-row-class-name="hrcn"
                        row-class-name="rcn">
                        <el-table-column align="center" label="订单编号" min-width="200">
                            <template slot-scope="scope">
                                {{ scope.row.orderNo }}
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="部位病种" min-width="113">
                            <template slot-scope="scope">
                                {{ scope.row.treatmentName }}
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="配置医护" min-width="113">
                            <template slot-scope="scope">
                                {{ scope.row.configurationName }}
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="服务配置时间" min-width="200">
                            <template slot-scope="scope">
                                {{ parseTime(scope.row.configurationTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="订单状态" min-width="117">
                            <template slot-scope="scope">
                                {{ statusArrT[scope.row.presentStage] }}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>

        </el-dialog>
        <!-- 删除 -->
        <el-dialog title="提示" :visible.sync="delDialogVisible" custom-class="deleteDialog" :show-close='false'
            :modal='true'>
            <span class="deleteDialogSpanconter">您确认要删除该设备吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="danger" @click="delHeld">确认删除</el-button>
                <el-button type="primary" @click="delDialogVisible = false">取消</el-button>
            </span>
        </el-dialog>
        <!-- 解绑医院 -->
        <el-dialog title="提示" :visible.sync="jbDialogVisible" custom-class="deleteDialog" :show-close='false' :modal='true'>
            <span class="deleteDialogSpanconter">{{ jbDialogVisibleTitle }}</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="danger" @click="confirmHeld">确认解绑</el-button>
                <el-button type="primary" @click="jbDialogVisible = false">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import construction from '@/components/construction/index.vue'
import screenSelect from '@/components/screenSelect/index.vue'
import steplog from '@/components/steplog/index.vue'
import { getDeviceList, getDeviceUnbinding, getDeviceDelete ,getDeviceDetail,getTimeExpor} from '@/api/equipmentindex'
import { formatDates } from '@/utils/index'
import { importExcel } from '../../api/common'

import { getHospitalList, getHosPartList ,getHosPartIdList} from '@/api/organizational'
import {
    mapGetters
} from 'vuex'
export default {
    name: "equipmentindex",
    components: {
        construction,
        screenSelect,
        steplog
    },
    computed: {
        ...mapGetters([
            'permissionList'
        ])
    },
    data() {
        return {
            delDialogVisible: false,
            addDialogVisible: false,
            rentDialogVisible: false,
            jbDialogVisible: false,
            jbDialogVisibleTitle: '',
            jbDialogVisibleId: '',
            deleteId: '',
            viewFrom:null,
            statusArr: ['出租中', '损坏', '科室库', '平台库'],
            statusArrT: ['待处理', '进行中', '已完成', '已逾期'],
            presentStageoptions: [
                {
                    value: 0,
                    label: '平台库'
                },
                {
                    value: 1,
                    label: '科室库'
                },
                //{
                  //  value: 2,
                    //label: '出租中'
                //},
                //{
                  //  value: 3,
                    //label: '损坏'
                //},
            ],
            hospitaloptions: [],
            hospartoptions: [],
            imageUrl: '',
            tableData: [],
            offsetHeight: 0,
            queryFrom: {
                status: '',
                deviceNo: '',
                hospitalId: '',
                hospitalDepartId: '',
                transferDateTime: '',
                transferDateStart: '',
                transferDateEnd: ''
            },
            pageData: {
                pageNo: 1,
                pageSize: 10
            },
            total: 0,
            endHeight:0,
            randomTableKey:null,
			isDerive:false
        };
    },
    mounted() {
        console.log(this.$route);
        this.getHpitalList()
        // this.getHPartList()
        this.getList()
        let fHeight = (window.getComputedStyle(document.querySelector('.editcss')).height).replace('px', "")
        let zHeight = (window.getComputedStyle(document.querySelector('.titleHeight')).height).replace('px', "")
        this.endHeight = (fHeight-zHeight-120)
    },
    methods: {
        getList() {
            let that = this
            const loading = that.$loading({
                lock: true,
                text: 'Loading...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            getDeviceList(that.queryFrom, that.pageData).then(res => {
                console.log(res);
                if (res.code == 200) {
                    that.tableData = res.data.devicePage.records
                    that.total = res.data.devicePage.total
                    this.randomTableKey = Math.random()
                    loading.close()
                }
            })
        },
        getHPartList() {
          if(this.queryFrom.hospitalId!=''){
            this.hospartoptions = []
            getHosPartIdList(this.queryFrom.hospitalId).then(res => {
                if (res.code == 200) {
                    res.data.hospitalDepartList.map(item => {
                        this.hospartoptions.push({
                            value: item.deptId,
                            label: item.deptName
                        })
                    })
                }
            })
          }else{
            this.hospartoptions = []
          }
        
        },
        getHpitalList() {
            this.hospitaloptions = []
            getHospitalList().then(res => {
                if (res.code == 200) {
                    res.data.hospitalList.map(item => {
                        this.hospitaloptions.push({
                            value: item.hospitalId,
                            label: item.hospitalName
                        })
                    })
                }
            })
        },
        valueHeld(childParam, fatherparam) {
            this.queryFrom[fatherparam] = childParam
            if(fatherparam=='hospitalId'){
              this.getHPartList()
            }
        },
        search() {
            this.pageData={
					pageNo: 1,
					pageSize: 10
				}
            if (this.queryFrom.transferDateTime != '') {
                this.queryFrom.transferDateEnd = formatDates(this.queryFrom.transferDateTime[1])
                this.queryFrom.transferDateStart = formatDates(this.queryFrom.transferDateTime[0])
            }
            console.log(this.queryFrom);
            this.getList()
        },
        reset() {
            this.queryFrom = {
                status: '',
                deviceNo: '',
                hospitalId: '',
                hospitalDepartId: '',
                transferDateTime: '',
                transferDateStart: '',
                transferDateEnd: ''
            }
            this.hospartoptions = []
            this.getList()
        },
        derive() {
			this.isDerive = true
            if (this.queryFrom.transferDateTime != '') {
                this.queryFrom.transferDateEnd = formatDates(this.queryFrom.transferDateTime[1])
                this.queryFrom.transferDateStart = formatDates(this.queryFrom.transferDateTime[0])
            }
            if(this.queryFrom.transferDateTime=='' || this.queryFrom.transferDateStart==''){
            	this.$Toast('请先选择时间再导出')
				this.isDerive = false
            	return
            }
            getTimeExpor(this.queryFrom).then(res => {
              const link = document.createElement('a')
              const blob = new Blob([res.data], {
                type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
              })
              const fileName = decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1].substring(7));
              link.setAttribute('download',fileName)
              link.style.display = 'none'
              link.href = URL.createObjectURL(blob)
              link.click()
			  setTimeout(()=>{
			  	this.isDerive = false
			  },5000)
            }).catch(err=>{
				setTimeout(()=>{
					this.isDerive = false
				},5000)
			})
        },
        delClick(row) {
            if (row.status != 2) {
                this.delDialogVisible = true
                this.deleteId = row.deviceId
            }
            console.log(row);
        },
        // 确认删除
        delHeld() {
            let that = this
            getDeviceDelete(that.deleteId).then(res => {
                if (res.code == 200) {
                    that.getList()
                    this.delDialogVisible = false
                    this.$Toast('删除成功')
                }
            })

        },
        confirmHeld() {
            let that = this
            getDeviceUnbinding(that.jbDialogVisibleId).then(res => {
                if (res.code == 200) {
                    that.getList()
                    that.jbDialogVisible = false
                    that.jbDialogVisibleTitle = ''
                    that.$Toast('解绑成功')
                } else {
                    that.jbDialogVisible = false
                    that.jbDialogVisibleTitle = ''
                    that.$Toast(res.message)
                }
            })

        },
        // viewClick(row) {
        //     this.addDialogVisible = true
        //     console.log(row);
        //     this.fromDatas = row
        // },
        unbindClick(row) {
            if (row.status == 3 || row.status == 1) {
                this.jbDialogVisible = true
                this.jbDialogVisibleId = row.deviceId
                if (row.status == 1) {
                    this.jbDialogVisibleTitle = '你确定要从' + this.presentStageoptions[row.status].label + '解除该设备吗？'
                } else {
                    this.jbDialogVisibleTitle = '该设备已损坏确定要解除吗？'
                }
            }

            console.log(row);
        },
        recordClick(row) {
            getDeviceDetail(row.deviceId).then(res=>{
              if(res.code==200){
                this.rentDialogVisible = true
                this.viewFrom = res.data.device
              }
            })
        },
        additions(e) {
            this.$Toast('暂未开放')
            return
            this.fromDatas = {}
            this.addDialogVisible = e
        },
        importBtn(el) {
            var self = this;
            const data = new FormData();
            data.append('device', el.file);
            const loading = self.$loading({
                lock: true,
                text: 'Loading...',
                spinner: 'el-icon-loading',
                background: 'rgba(255, 255, 255, 0.5)'
            });
            importExcel(data).then(res => {
                self.getList();
                loading.close();
                self.$Toast('导入完成')
            });
        },
        // 提交
        addsubmit() {
            this.addDialogVisible = false
            this.$Toast('提交成功')
            // 成功之后情况编辑
            // this.fromDatas = {}
        },
        handleSizeChange(val) {
            this.pageData.pageSize = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.pageData.pageNo = val
            this.getList()
        },
    }
}
</script>

<style lang="scss" scoped>
::v-deep .hrcn th {
    background-color: #FFFFFF;
    color: #989898;
    font-size: 15px;
    font-weight: 400;
}

::v-deep .el-table__fixed-right {
    height: calc(100% - 10px) !important;
}

::v-deep .el-table__fixed-right::before {
    display: none;
}

::v-deep .hrcn th .cell {
    border-right: 1px solid #EFEFEF;

}

::v-deep .hrcn th:last-child .cell {
    border-right: none;
}

::v-deep .rcn {
    color: #000;
    font-size: 16px;
    font-weight: 400;
}

::v-deep .rcn td:nth-last-child(1) {
    border-left: 1px solid #EFEFEF;
}

.card_contents {
    height: calc(100% - 1px);
    display: flex;
    flex-direction: column;
    align-items: center;
    // justify-content: center;
    overflow-y: auto;

    .card_contents_tex {
        flex: 1;
        overflow-y: auto;
        margin-bottom: 20px;
        // padding: 20px;
        min-height: 200px;
    }

    .card_contents_footer {
        padding: 16px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-top: 1px solid #EFEFEF;
    }
}

.content_h {
    min-height: 149px;
    border-radius: 5px;
    padding: 0px;
    border-bottom: 1px solid #EFEFEF;
    padding-bottom: 14px;
}

.title_tops {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px;
    min-height: 79px;
    border-bottom: 1px solid #EFEFEF;

    .title_tops_t {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.screen_case_title {
    font-size: 16px;
    font-weight: 400;
    color: #000;
    margin-right: 35px;
}

.title_top_E {
    font-size: 12px;
    font-weight: 400;
    color: #9898989E;
}

.title_top_C {
    font-size: 18px;
    font-weight: 400;
    color: #000;
}

.screen_case {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 14px 30px 0;
}

.screen_case_amount {
    // margin-right: 38px;
    min-width: 210px;

    .screen_case_amount_lable {
        font-size: 15px;
        color: #989898;
    }

    .screen_case_amount_value {
        font-size: 16px;
        color: #000;
    }
}

::v-deep .ch_button_seav {
    padding: 7px 27px;

    span {
        display: flex;
        align-items: center;
        justify-content: center;

        div {
            font-size: 16px;
            font-weight: 400;
            margin-left: 10px;
        }
    }
}

.ch_button_img_seav {
    width: 24px;
    height: 24px;
}

.dialog_title_ch_conter_operate {
    // padding: 24px 35px;
    // border: 1px solid #EBEBEB;
    border-radius: 2px;
    // display: flex;
    // align-items: center;
}

::v-deep .editbtn span,
::v-deep .jiebangbtn span,
::v-deep .delbtn span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.editbtn,
.jiebangbtn,
.delbtn {
    img {
        width: 15px;
        height: 15px;
        margin-right: 4px;
    }
}

.delbtn {
    color: #FE294D;
    // margin-left: 57px;
}

.jiebangbtnav {
    color: #989898;
}

.editbtn:active,
.jiebangbtn:active,
.delbtn:active {
    opacity: .6;
}

.el-dialog__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

//新增弹窗
::v-deep .addeteDialog {
    background-color: #FFFFFF;
    width: 1268px;
    // height: 764px;
    border-radius: 6px;
    box-shadow: 0 0 10px #60778E47;
    display: flex;
    flex-direction: column;
}

::v-deep .addeteDialog .el-dialog__header {
    height: 80px;

    div {
        display: flex;
        flex-direction: column;
    }

    border-bottom: 1px solid #EFEFEF;

    // 自定义弹窗x号
    .el-dialog__close::before {
        content: ' ';
        background: url(../../assets/iconfont/x-circle.png);
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
        display: flex;
    }

    .el-dialog__close:active::before {
        background: url(../../assets/iconfont/x-circleactive.png);
        background-size: 20px 20px;
    }
}

::v-deep .addeteDialog .el-dialog__body {
    padding: 17px 20px;

    .addeteDialog_conter {
        // border: 1px solid #EFEFEF;
        flex: auto;
        display: flex;
        flex-direction: column;

        .top_content {
            flex: 1;
            min-height: 200px;
            max-height: 580px;
            overflow-y: auto;

            // padding: 20px 23px;
            .top_content_item {
                border: 1px solid #EFEFEF;
                padding: 11px 17px;
                margin-bottom: 14px;
                display: flex;
                align-items: center;
                justify-content: space-between;

                img {
                    width: 106px;
                    height: 106px;
                }

                .top_content_item_foot {
                    .top_content_item_footT {
                        font-size: 12px;
                        color: #989898;
                    }

                    .top_content_item_footT span:nth-child(1) {
                        font-size: 32px;
                        color: #000;
                    }

                    .top_content_item_footB {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        font-size: 12px;
                        color: #989898;
                    }

                    .top_content_item_footB span:nth-child(2) {
                        font-size: 32px;
                        color: #000;
                    }
                }

            }

            .content_checkbox {
                .title_che {
                    margin-top: 20px;
                    margin-bottom: 10px;
                    font-size: 15px;
                    font-weight: 400;
                    color: #989898;
                }

                .title_che_sup {
                    font-size: 13px;
                    font-weight: 400;
                    color: #414141;
                }

                .el-checkbox {
                    margin-top: 8px;
                }

            }
        }

        .footer_submit {
            display: flex;
            align-items: center;
            justify-content: center;
            border-top: 1px solid #EFEFEF;
            padding: 10px 0 15px 0;
        }
    }
}

//删除弹窗
::v-deep .deleteDialog {
    background-color: #FFFFFF;
    width: 552px;
    height: 332px;
    border-radius: 6px;
    box-shadow: 0 0 10px #60778E47;
    display: flex;
    flex-direction: column;
}

::v-deep .deleteDialog .el-dialog__header {
    .el-dialog__title {
        color: #000;
        font-size: 18px;
        font-weight: 400;
    }

    border-bottom: 1px solid #EFEFEF;
    // 自定义弹窗x号
    // .el-dialog__close::before{
    //   content:' ';
    //   background: url(../../assets/iconfont/x-circle.png);
    //   background-size: 20px 20px;
    //   width: 20px;
    //   height: 20px;
    //   display: flex;
    // }
    // .el-dialog__close:active::before{
    //   background: url(../../assets/iconfont/x-circleactive.png);
    //   background-size: 20px 20px;
    // }
}

::v-deep .deleteDialogSpanconter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 18px;
    font-weight: 400;
    color: #000;
}

::v-deep .deleteDialog .el-dialog__body {
    flex: 1;
}

.deleteDialog .dialog-footer {
    display: flex;
    justify-content: center;
    align-items: center;

    button {
        width: 120px;
        height: 38px;
        border-radius: 1px;
        font-size: 16px;
        font-weight: 400;
        color: #FFFFFF;
    }

    button:active {
        opacity: .6;
    }

    button:nth-child(1) {
        margin-right: 32px;
        background-color: #FE294D;
        border-color: #FE294D;
    }

    button:nth-child(2) {
        background-color: #0584FE;
        border-color: #0584FE;
    }
}

::v-deep .el-button.ch_button {
    padding: 8px 9px;
}

::v-deep .el-button.ch_button span {
    display: flex;
    align-items: center;

    div {
        font-size: 13px;
        font-weight: 400;
        margin-left: 4px;
    }
}

.authority {
    margin-bottom: 25px;
}
::v-deep .btnfile{
    margin: 0;
    padding: 0;
}
::v-deep .btnfile:hover{
    background-color: #00000000;
}
::v-deep .btnfile span{
display: flex;
align-items: center;
font-size: 16px;
      font-weight: 400;
      color: #0584FE;
      white-space: nowrap;
}
::v-deep .el-table--border td{
  border-right: 0;
}
::v-deep .el-table--border th{
  border-right: 0;
}
::v-deep .el-table__body tr.hover-row.current-row>td,::v-deep .el-table__body tr.hover-row.el-table__row--striped.current-row>td,::v-deep .el-table__body tr.hover-row.el-table__row--striped>td,::v-deep .el-table__body tr.hover-row>td{
     background-color:#dbdbdb;
 }
</style>
